<template>
    <!-- 导航区 -->
     <div class="sidebarSon">
        <ul v-for="item in newArr">
            <!-- 第一种字符串传值 -->
            <!-- <li><router-link :to="`/params/content/${item.id}/${item.title}/${item.contentVar}`">
                {{item.title}}
            </router-link></li> -->
            <li><router-link :to="{
                name:'contentName',
                params:{
                    id:item.id,
                    title:item.title,
                    contentVar:item.contentVar
                }
            }">
                {{item.title}}
            </router-link></li>
        </ul>
     </div>
     <!-- 展示区 -->
      <div class="contentSon">
        <router-view></router-view>
      </div>
</template>

<script lang="ts" setup name="params">
import { RouterLink,RouterView } from 'vue-router';
const newArr = [
    {id:'1',title:"come on lxy", contentVar:"why you need to do this?"},
    {id:'2',title:"study hard",contentVar:"study can make you rich"},
    {id:'3',title:"how to study English",contentVar:"try create sentences"}
]
</script>

<style scoped>
.sidebarSon{
    position: fixed;
}
.contentSon{
    margin-left: 300px;
    position: fixed;
}
</style>